<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix" v-if="tableData && tableData.length > 0">
      <shopee-table class=dataTable :data="tableSumData" style="width: 90%">
        <shopee-table-column prop="project" label="项目" fixed="left" :width=100 align="center"></shopee-table-column>
        <shopee-table-column prop="num" label="需要自动化用例总数" :width=150 align="center"></shopee-table-column>
        <shopee-table-column prop="complete_num" label="已完成数量" :width=150 align="center"></shopee-table-column>
        <shopee-table-column prop="finish_percent" label="完成百分比" :width=150 align="center"></shopee-table-column>
        <shopee-table-column prop="case_sum" label="总用例数" :width=150 align="center"></shopee-table-column>
        <shopee-table-column prop="update_time" label="更新时间"  :width=250 align="center"></shopee-table-column>
      </shopee-table>
      <br>

      <shopee-tabs value="tab1">
        <shopee-tab-pane label="All" name="tab1">
          <shopee-table :data="tableData" style="width: 100%">
            <shopee-table-column prop="index" label="序号" fixed="left" :width=100></shopee-table-column>
            <shopee-table-column prop="project" label="项目" :width=150 :filters="filters" :filter-method="filterMethod"></shopee-table-column>
            <shopee-table-column prop="interface_path" label="接口" :default-sort = "{prop: 'interface_path', order: 'descending'}"></shopee-table-column>
            <shopee-table-column prop="interface_num" label="接口数" sortable :sort-method="sortByInterfaceNum" :width=300></shopee-table-column>
            <shopee-table-column prop="case_num" label="用例数" sortable :sort-method="sortByCaseNum" fixed="right" :width=200></shopee-table-column>
          </shopee-table>
        </shopee-tab-pane>

        <shopee-tab-pane label="CRM" name="tab2">
          <shopee-table :data="tableCrmData" style="width: 100%">
            <shopee-table-column prop="index" label="序号" fixed="left" :width=100></shopee-table-column>
            <shopee-table-column prop="project" label="项目" :width=150></shopee-table-column>
            <shopee-table-column prop="interface_path" label="接口" :default-sort = "{prop: 'interface_path', order: 'descending'}"></shopee-table-column>
            <shopee-table-column prop="interface_num" label="接口数" sortable :sort-method="sortByInterfaceNum" :width=300></shopee-table-column>
            <shopee-table-column prop="case_num" label="用例数" sortable :sort-method="sortByCaseNum" fixed="right" :width=200></shopee-table-column>
          </shopee-table>
        </shopee-tab-pane>

        <shopee-tab-pane label="MBS" name="tab3">
          <shopee-table :data="tableMbsData" style="width: 100%">
            <shopee-table-column prop="index" label="序号" fixed="left" :width=100></shopee-table-column>
            <shopee-table-column prop="project" label="项目" :width=150></shopee-table-column>
            <shopee-table-column prop="interface_path" label="接口" :default-sort = "{prop: 'interface_path', order: 'descending'}"></shopee-table-column>
            <shopee-table-column prop="interface_num" label="接口数" sortable :sort-method="sortByInterfaceNum" :width=300></shopee-table-column>
            <shopee-table-column prop="case_num" label="用例数" sortable :sort-method="sortByCaseNum" fixed="right" :width=200></shopee-table-column>
          </shopee-table>
        </shopee-tab-pane>
      </shopee-tabs>
    </div>
  </el-card>
</template>

  <script>
    import {api, getRequest, postRequest} from "@/api/commit";

    export default {
      name : "CoverageView",
      data() {
        return {
          filters: [{
          text: 'All'
          }, {
          text: 'CRM',
          value: 'CRM'
          }, {
          text: 'MBS',
          value: 'MBS'
          }],
          tableData: [],
          tableSumData:[],
          tableCrmData:[],
          tableMbsData:[]

        }
      },
      methods: {
        indexMethod(index) {
          return index ;
        },
        filterMethod(val, {row, column}) {
          return row.project == val;
        },
        sortByCaseNum(one, two) {
          return one.case_num > two.case_num ? -1 : 1;
        },
        sortByInterfaceNum(one, two) {
          return one.interface_num > two.interface_num ? -1 : 1;
        },
        init_data() {
          getRequest(api['coverage_view']).then((res) => {
            res = res.resultReturn
            this.tableData= res.data
            for(var i = 0; i <res.data.length; i++){
              // console.log(res.data[i].project)
              if(res.data[i].project === "MBS"){
                this.tableMbsData.push(res.data[i]);
              }else if(res.data[i].project === "CRM"){
                this.tableCrmData.push(res.data[i]);
              }
            }
          }, (error) => {
            console.info(error)
          })

          getRequest(api['coverage_sum']).then((res) => {
            res = res.resultReturn
            this.tableSumData= res.data
          }, (error) => {
            console.info(error)
          })
        }
      },
      mounted () {
        this.init_data()
      }
    }
  </script>

<style scoped>
  .dataTable{
    text-align:center
  }
</style>
